<template>
  <div class="movie-item">
    <img :src="item.pic" alt="" />
    <div>{{ item.title }}</div>
    <div class="star">
      <span v-for="item of item.star" :key="item.id">
        <img v-if="item >= 1.5" src="../../../assets/icon/star.png" alt="" />
        <img
          v-else-if="item >= 0.5"
          src="../../../assets/icon/ban.png"
          alt=""
        />
        <img v-else src="../../../assets/icon/none-star.png" alt="" /> </span
      >{{ item.rating }}
    </div>
  </div>
</template>

<script>
export default {
  props: ["item"],
};
</script>

<style scoped>
.movie-item {
  width: 200px;
  height: 300px;
  padding-bottom: 80px;
}
.movie-item>img {
  height: 300px;
}
.star img{
  width: 30px;
}
</style>